<template>
  <div class="login-container">
    <div class="login-box">
      <div style="height: 40%;width: 100%;margin: auto;display: flex;flex-direction: column;justify-content: center;align-items: center">
        <img alt="Vue logo" src="../assets/logo.png">
        <div style="width: 100%;text-align: center">
          <h2>注册</h2>
          <h3>创建您的饿死了么账号</h3>
        </div>
      </div>


      <div style="height: 40% ;width: 35%; margin: auto;text-align: center">
        <div style="width: 100%;height: 20%;display: flex;justify-content: center;align-items: center">
          <a-input v-model="userName" placeholder="账号">
            <a-icon slot="prefix" type="user"></a-icon>
            <a-tooltip slot="suffix" title="该用户名已被占用" v-show="error_nameUsed">
              <a-icon type="warning" style="color: red"/>
            </a-tooltip>
          </a-input>
        </div>
        <div style="width: 100%;height: 20%;display: flex;justify-content: center;align-items: center">
          <a-input v-model="userPasswd" type="password" placeholder="密码">
            <a-icon slot="prefix" type="lock"></a-icon>
            <a-tooltip slot="suffix" title="密码强度不足：必须包含小写字母、大写字母、数字、特殊符号中的三种，且位数不少于8位" v-show="!passwdStrengthPassed&&userPasswd!=''">
              <a-icon type="warning" style="color: red"/>
            </a-tooltip>
          </a-input>
        </div>
        <div style="width: 100%;height: 20%;display: flex;justify-content: center;align-items: center">
          <a-input v-model="userPasswd_confirm" type="password" placeholder="确认密码" @keyup.enter="submitRegEvent">
            <a-icon slot="prefix" type="lock"></a-icon>
            <a-tooltip slot="suffix" title="密码不一致" v-show="userPasswd!=userPasswd_confirm">
              <a-icon type="warning" style="color: red"/>
            </a-tooltip>
          </a-input>
        </div>
        <div style="height: 20%"/>
        <div style="width: 100%;height: 20%;display: flex;justify-content: center;align-items: center">
          <a-row style="width: 100%;height: 100%;display: flex;justify-content: center;align-items: center">
            <a-button type="primary" :loading="loadingReg" v-on:click="submitRegEvent" v-bind:disabled="disableSubmit">提交</a-button>
          </a-row>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import {sha256_digest} from '@/ref/sha256'
import {notification} from 'ant-design-vue'
export default {
  data() {
    return {
      userName: '',
      userPasswd:'',
      userPasswd_confirm:'',
      error_nameUsed:false,
      loadingReg:false,
      passwdStrengthPassed:false
    };
  },
  methods:{
    submitRegEvent:function (){
      if(this.disableSubmit) return
      this.loadingReg=true
      let name=this.userName
      let passwd=this.userPasswd
      let rearUrl=this.$store.state.rear_url
      console.log("Register:User="+name+"pwd="+passwd)
      passwd=sha256_digest(passwd)
      console.log("pwd_sha256="+passwd)
      this.$axios.post('http://'+rearUrl+'/reg',{
        username:name,
        password:passwd
      })
          .then((res)=>{
            this.loadingReg=false
            console.log(res.data)
            if (res.data.regStatus!==0){
              notification.open({
                message:'注册失败',
                description:'用户名被占用'
              })
              this.error_nameUsed=true
            }else{
              notification.open({
                message:'注册成功',
                description:'欢迎加入饿死了么，'+name
              })
              window.location='/#/login?user='+name
            }
          }).catch((err)=>{
            this.loadingReg=false
        notification.open({
          message:'登陆失败',
          description:"服务器错误："+err.message
        })
      })
    },
    isLowercase:function (obj)
    {
      return /^[a-z]+$/.test(obj);

    },

    /* * 判断是否为大写英文字母，是则返回true,否则返回false */

    isUppercase:function (obj)
    {
      return /^[A-Z]+$/.test(obj);

    },
    isRate:function (input)
    {
      return /^[0-9]+.?[0-9]*$/.test(input);
    },
    checkPasswdStrength:function (){
      let upper=0
      let lower=0
      let number=0
      let cha=0
      for(let i=0;i<this.userPasswd.length;i++){
        if(this.isRate(this.userPasswd[i])){
          number++
        }else if(this.isLowercase(this.userPasswd[i])){
          lower++
        }else if(this.isUppercase(this.userPasswd[i])){
          upper++
        }else{
          cha++
        }
      }
      let strength=0
      if(upper>0) strength++
      if(lower>0) strength++
      if(number>0) strength++
      if(cha>0) strength++
      //console.log(lower.toString()+upper.toString()+number.toString()+cha.toString()+strength.toString())
      return strength>2&&(upper+lower+number+cha>7);
    }
},
  watch:{
    userName:function (){
      this.error_nameUsed=false
    },
    userPasswd:function (){
      this.passwdStrengthPassed=this.checkPasswdStrength()
    }
  },
  computed:{
    disableSubmit:function (){
      return this.userPasswd != this.userPasswd_confirm || this.error_nameUsed || this.userPasswd == '' || this.userName == '' || !this.passwdStrengthPassed;
    }
  }

};
</script>


<style>
.login-container{
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}
.login-box{
  height: 80%;
  width: 50%;
  border: 1px outset #dddddd;
  border-radius: 8px;
  font-family: "Segoe UI",sans-serif;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>